<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog配置使用示例</title>
    <link href="../assets/css/tailwind.css" rel="stylesheet">
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
    <!-- 导航栏示例 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-pencil-square-o text-2xl text-blog-primary" aria-hidden="true"></i>
                    <span class="text-xl font-bold text-gray-900">BlogHub</span>
                </div>
                
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#" class="blog-nav-link-active">首页</a>
                    <a href="#" class="blog-nav-link">分类</a>
                    <a href="#" class="blog-nav-link">热门</a>
                    <a href="#" class="blog-nav-link">最新</a>
                    <a href="#" class="blog-nav-link">关于</a>
                </nav>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- 英雄区域 -->
        <section class="bg-gradient-to-r from-blog-primary to-blog-secondary text-white py-16 md:py-24">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-shadow">
                    使用合并后的配置
                </h1>
                <p class="text-lg md:text-xl text-blue-100 mb-8">
                    展示如何使用合并后的Tailwind配置和自定义工具类
                </p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <button class="blog-btn blog-btn-secondary shadow-lg">
                        开始探索
                    </button>
                    <button class="blog-btn blog-btn-primary shadow-lg">
                        提交博客
                    </button>
                </div>
            </div>
        </section>

        <!-- 博客卡片示例 -->
        <section class="mt-16">
            <h2 class="text-2xl font-bold text-gray-900 mb-8">博客卡片示例</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <!-- 使用自定义组件的卡片 -->
                <article class="blog-card card-hover">
                    <div class="relative">
                        <img src="https://picsum.photos/id/42/600/400" alt="博客封面" class="w-full h-48 object-cover">
                        <span class="absolute top-3 left-3 blog-tag blog-tag-success">技术</span>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-gray-500 text-sm">2023-06-20</span>
                            <div class="flex items-center text-gray-500 text-sm">
                                <i class="fa fa-eye mr-1" aria-hidden="true"></i> 1.2k
                            </div>
                        </div>
                        <h3 class="text-xl font-bold mb-3 text-gray-900 hover:text-blog-primary transition-colors">
                            <a href="#">使用合并后的Tailwind配置</a>
                        </h3>
                        <p class="text-gray-600 mb-4 line-clamp-3">
                            本文展示了如何将Blog页面的Tailwind配置合并到公共配置中，包括自定义工具类、组件样式和主题扩展...
                        </p>
                        <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/26/100/100" alt="作者头像" class="w-8 h-8 rounded-full object-cover">
                                <span class="ml-2 text-sm text-gray-700">开发者</span>
                            </div>
                            <div class="flex items-center space-x-4 text-gray-500">
                                <button class="hover:text-red-500 transition-colors"><i class="fa fa-heart-o" aria-hidden="true"></i></button>
                                <button class="hover:text-blue-500 transition-colors"><i class="fa fa-comment-o" aria-hidden="true"></i></button>
                            </div>
                        </div>
                    </div>
                </article>

                <!-- 使用自定义阴影的卡片 -->
                <article class="bg-white rounded-xl shadow-card overflow-hidden card-hover">
                    <div class="relative">
                        <img src="https://picsum.photos/id/180/600/400" alt="博客封面" class="w-full h-48 object-cover">
                        <span class="absolute top-3 left-3 blog-tag blog-tag-purple">设计</span>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-gray-500 text-sm">2023-06-18</span>
                            <div class="flex items-center text-gray-500 text-sm">
                                <i class="fa fa-eye mr-1" aria-hidden="true"></i> 2.5k
                            </div>
                        </div>
                        <h3 class="text-xl font-bold mb-3 text-gray-900 hover:text-blog-primary transition-colors">
                            <a href="#">自定义阴影效果</a>
                        </h3>
                        <p class="text-gray-600 mb-4 line-clamp-3">
                            展示了如何使用自定义的阴影效果，包括card和card-hover阴影，以及文本阴影效果...
                        </p>
                        <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="w-8 h-8 rounded-full object-cover">
                                <span class="ml-2 text-sm text-gray-700">设计师</span>
                            </div>
                            <div class="flex items-center space-x-4 text-gray-500">
                                <button class="hover:text-red-500 transition-colors"><i class="fa fa-heart-o" aria-hidden="true"></i></button>
                                <button class="hover:text-blue-500 transition-colors"><i class="fa fa-comment-o" aria-hidden="true"></i></button>
                            </div>
                        </div>
                    </div>
                </article>

                <!-- 使用行高限制的卡片 -->
                <article class="blog-card card-hover">
                    <div class="relative">
                        <img src="https://picsum.photos/id/24/600/400" alt="博客封面" class="w-full h-48 object-cover">
                        <span class="absolute top-3 left-3 blog-tag blog-tag-primary">前端</span>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-gray-500 text-sm">2023-06-15</span>
                            <div class="flex items-center text-gray-500 text-sm">
                                <i class="fa fa-eye mr-1" aria-hidden="true"></i> 3.1k
                            </div>
                        </div>
                        <h3 class="text-xl font-bold mb-3 text-gray-900 hover:text-blog-primary transition-colors line-clamp-2">
                            <a href="#">行高限制工具类的使用</a>
                        </h3>
                        <p class="text-gray-600 mb-4 line-clamp-4">
                            本文详细介绍了如何使用line-clamp工具类来控制文本的行数显示，包括line-clamp-2、line-clamp-3和line-clamp-4的使用方法，以及在不同场景下的最佳实践...
                        </p>
                        <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/32/100/100" alt="作者头像" class="w-8 h-8 rounded-full object-cover">
                                <span class="ml-2 text-sm text-gray-700">前端工程师</span>
                            </div>
                            <div class="flex items-center space-x-4 text-gray-500">
                                <button class="hover:text-red-500 transition-colors"><i class="fa fa-heart-o" aria-hidden="true"></i></button>
                                <button class="hover:text-blue-500 transition-colors"><i class="fa fa-comment-o" aria-hidden="true"></i></button>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </section>

        <!-- 工具类展示 -->
        <section class="mt-16">
            <h2 class="text-2xl font-bold text-gray-900 mb-8">自定义工具类展示</h2>
            <div class="bg-white rounded-xl shadow-card p-8">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-lg font-bold text-gray-900 mb-4">文本阴影效果</h3>
                        <p class="text-shadow text-2xl font-bold text-blog-primary mb-4">带阴影的标题</p>
                        <p class="text-gray-600">使用 .text-shadow 类添加文本阴影效果</p>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-gray-900 mb-4">行高限制</h3>
                        <p class="line-clamp-2 text-gray-600 mb-2">这是第一行文本，用于演示行高限制功能。这是第二行文本，当内容超过指定行数时会被截断并显示省略号。</p>
                        <p class="text-sm text-gray-500">使用 .line-clamp-2 限制为2行</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <script>
        // 简单的交互效果
        document.addEventListener('DOMContentLoaded', function() {
            // 添加一些交互效果
            const cards = document.querySelectorAll('.card-hover');
            cards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-5px)';
                });
                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0)';
                });
            });
        });
    </script>
</body>
</html> 